window.onload = function () {
    var stats = initStats(); //调用stat函数
    var scene = new THREE.Scene(); //定义场景
    var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); //定义相机

    //定义渲染器
    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(0xFFFFFF);
    renderer.setSize(window.innerWidth, window.innerHeight);

    renderer.shadowMap.enabled = true;
    renderer.shadowMapSoft = true; //软阴影

    //创建一个坐标轴
    var axex = new THREE.AxesHelper(20);
    scene.add(axex);

    //创建一个光源
    var spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(100, 100, 0);
    scene.add(spotLight);
    //创建一个环境光源
    var ambientLight = new THREE.AmbientLight(0xdadada);
    scene.add(ambientLight);


    let cubeParams = {
        width: 5,
        basicColor: 0x000000,
        len: 3,
        colors: [0xFFEC01, 0x71BB28, 0xF67716, 0xEF1120, 0xFFFFFF, 0x00A6EC],
        cube: [],
        sCube: [],
        sWidthMax: 4,
        sWidthMin: 1
    };
    //创建方块
    function cubeGroup() {
        const {
            width,
            basicColor,
            len,
            cube
        } = cubeParams;
        for (var i = 0; i < len; i++) {
            for (var j = 0; j < len * len; j++) {
                const basicX = width * (j % len);
                const basicY = width * (parseInt(j / len));
                const basicZ = i * width;

                var basicCube = new THREE.BoxGeometry(width, width, width);
                var basicMaterial = new THREE.MeshLambertMaterial({
                    color: basicColor,
                    wireframe: true
                });
                var oldCube = new THREE.Mesh(basicCube, basicMaterial);
                cube.push(new THREE.Mesh(oldCube));
                oldCube.position.set(basicX, basicY, basicZ);
                scene.add(oldCube);

                //辅助用
                // var newCube = new THREE.Object3D();
                // var newCubeobj = {basicX, basicY, basicZ}
                // switch({basicX, basicY, basicZ}){
                //     case !basicX:
                //         var smallCube = new THREE.BoxGeometry(minWidth, width, width);
                //         var colorMaterial = new THREE.MeshLambertMaterial({
                //             color: colors[eq]
                //         })
                // }
                // if (!basicX || !basicY || !basicZ) {
                //     var smallCube = new THREE.BoxGeometry(width, width, width)
                // }


                smallCube(basicX, basicY, basicZ, [(i + 1) * (j + 1) - 1]);
                // addGroup(basicX, basicY, basicZ, cube[(i + 1) * (j + 1) - 1]);
            }
        }
    }

    function smallCube(basicX, basicY, basicZ) {
        const {
            sWidthMax,
            sWidthMin
        } = cubeParams;
        let [x, y, z, newX, newY, newZ] = [sWidthMax, sWidthMax, sWidthMax, basicX, basicY, basicZ];
        let eq = 0;
        //x为0和为10的情况
        if (!basicX) {
            [x, y, z, newX, newY, newZ] = [sWidthMax, sWidthMax, sWidthMax, basicX, basicY, basicZ];
            x = sWidthMin;
            eq = 0;
            newX = -2.5;
            addSmallCube(x, y, z, newX, newY, newZ, eq);
        } else if (basicX === 10) {
            [x, y, z, newX, newY, newZ] = [sWidthMax, sWidthMax, sWidthMax, basicX, basicY, basicZ];
            x = sWidthMin;
            eq = 1;
            newX = 12.5;
            addSmallCube(x, y, z, newX, newY, newZ, eq);
        }

        // //y为0和为10的情况
        if (!basicY) {
            [x, y, z, newX, newY, newZ] = [sWidthMax, sWidthMax, sWidthMax, basicX, basicY, basicZ];
            y = sWidthMin;
            eq = 2;
            newY = -2.5;
            addSmallCube(x, y, z, newX, newY, newZ, eq);
        } else if (basicY === 10) {
            [x, y, z, newX, newY, newZ] = [sWidthMax, sWidthMax, sWidthMax, basicX, basicY, basicZ];
            y = sWidthMin;
            eq = 3;
            newY = 12.5;
            addSmallCube(x, y, z, newX, newY, newZ, eq);
        }

        //z为0和为10的情况
        if (!basicZ) {
            [x, y, z, newX, newY, newZ] = [sWidthMax, sWidthMax, sWidthMax, basicX, basicY, basicZ];
            z = sWidthMin;
            eq = 4;
            newZ = -2.5;
            addSmallCube(x, y, z, newX, newY, newZ, eq);
        } else if (basicZ === 10) {
            [x, y, z, newX, newY, newZ] = [sWidthMax, sWidthMax, sWidthMax, basicX, basicY, basicZ];
            z = sWidthMin;
            eq = 5;
            newZ = 12.5;
            addSmallCube(x, y, z, newX, newY, newZ, eq);
        }

    }

    function addSmallCube(x, y, z, newX, newY, newZ, eq) {
        const {
            colors,
            sCube
        } = cubeParams;
        var colorCube = new THREE.BoxGeometry(x, y, z);
        var colorMaterial = new THREE.MeshLambertMaterial({
            color: colors[eq]
        })
        var cube = new THREE.Mesh(colorCube, colorMaterial);
        cube.position.set(newX, newY, newZ);
        scene.add(cube);
        sCube.push(cube);
        // console.log("sCube", sCube);
    }

    cubeGroup();

    // var quaternion = new THREE.Quaternion();
    // var xLine = new THREE.Vector3( 0, 1, 0 );
    // var rad =  Math.PI / 4;
    // var obj = cubeParams.cube[0];
    // var obj1 = cubeParams.cube[1];
    // var x0 = obj.position.x;
    // var z0 = obj.position.z;
    // var x1 = obj1.position.x;
    // var z1 = obj1.position.z;
    // quaternion.setFromAxisAngle( xLine , Math.PI / 4 );
    // // var xAngle = cubeParams.cube[1].position.angleTo(xLine);

    // // var vector = new THREE.Vector3( 1, 1, 1 );
    // obj.quaternion.premultiply( quaternion );
    // obj.position.x = Math.cos(rad)*x0+Math.sin(rad)*z0;
    // obj.position.z = Math.cos(rad)*z0-Math.sin(rad)*x0;
    // obj1.quaternion.premultiply( quaternion );
    // obj1.position.x = Math.cos(rad)*x1+Math.sin(rad)*z1;
    // obj1.position.z = Math.cos(rad)*z1-Math.sin(rad)*x1;





    //输出到页面
    var webgl = document.getElementById('WebGL-output');
    webgl.appendChild(renderer.domElement);

    // var controls = new function () {
    //     this.Darkness = 0.5;
    //     this.cameraPX = -30;
    //     this.cameraPY = 30;
    //     this.cameraPZ = 30;
    // };

    var controls2 = new THREE.TrackballControls(camera, renderer.domElement);
    controls2.minDistance = 20; //控制缩放的范围
    controls2.maxDistance = 100;

    camera.position.x = 50;
    camera.position.y = 50;
    camera.position.z = 50;
    camera.lookAt(scene.position);

    // var gui = new dat.GUI();
    // gui.add(controls, 'Darkness', 0, 1);
    // gui.add(controls, 'cameraPX', -100, 100);
    // gui.add(controls, 'cameraPY', -100, 100);
    // gui.add(controls, 'cameraPZ', -100, 100);

    var step = 0.03;

    renderScene();

    function renderScene() {
        stats.update(); //实时更新
        controls2.update();

        //   spotLight.shadowDarkness = controls.Darkness;
        // camera.position.x = controls.cameraPX;
        // camera.position.y = controls.cameraPY;
        // camera.position.z = controls.cameraPZ;
        // camera.lookAt(scene.position);

        requestAnimationFrame(renderScene);
        renderer.render(scene, camera);
    }

    function initStats() { //初始化函数，定义具体位置
        var stats = new Stats();
        stats.setMode(0);
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.getElementById('Stats-output').appendChild(stats.domElement);
        return stats;
    }


}